<template>
	<view class="herder-body">
		<view class="title-list">
			<view class="herder-title">
				<image src="/static/herder-img/da3444c39d193b2778f5cadd287ca00c.gif" mode=""
					style="width:100px;height: 50px;"></image>
				<view class="titel-size">官方正品 支持门店兑换</view>
			</view>
			<view class="title-sosuo">
				<view style="margin: 15px 0;margin-left: 10px;">
					<image src="../../static/herder-img/wxb定位.png" style="width: 15px;height: 15px;"></image>
				</view>
				<text style="margin: 15px 5px;font-size: 14px;width: 38px;">廊坊</text>
				<view class=""
					style="border-radius: 20px;border: 1px solid white;height: 32px;margin: 8px 0;width: 225px;display: flex;">
					<input type="text" style="margin: 5px 0;width: 175px;margin-left: 5px;">
					<image src="../../static/herder-img/扫码.png" mode="" class="imgs"></image>
				</view>
				<view class="title-mendian" style="margin-left: 5px;">
					<image src="/static/herder-img/门店审核.png" mode="" style="width: 20px;height: 20px;padding-left: 10px;"></image>
					<text style="font-size: 12px;display: inline-block;">附近门店</text>
				</view>
				<view class="title-mendian">
					<image src="/static/herder-img//二维码.png" mode="" style="width: 20px;height: 20px;padding-left: 10px;"></image>
					<text style="font-size: 12px;display: inline-block;">会员码</text>
				</view>
			</view>
		</view>
		<!-- <view class="swiper-body" :style="'background:url('+b+') center center no-repeat;'"> -->
		<view class="swiper-body" :style="`background:url(${b}) center center no-repeat`">
			<view class="swiper-body-one">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" @change="getindex">
					<swiper-item v-for="(item,index) in list" :key="index">
						<image :src="item.image" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref
	} from "vue";
	import bannerList from '../../untils/banner.json'
	export default defineComponent({
		setup() {
			let list = ref([])
			let a=ref([])
			let b=ref('')
			list.value = bannerList
			list.value.forEach((item)=>{
				a.value.push(item.image)
			})
			b.value=a.value[0]
			let getindex=(e)=>{
				b.value=a.value[e.detail.current]
			}
			return {
				list,
				a,
				getindex,
				b
			};
		}
	});
</script>

<style lang="scss" scoped>
	.herder-body {
		position: relative;
		.title-list {
			.herder-title {
				font-size: 10px;
				color: white;
				position: relative;
				top: 0;
				z-index: 9999;

				.titel-size {
					position: absolute;
					bottom: 0;
					left: 12px;
				}
			}

			.title-sosuo {
				position: absolute;
				z-index: 9999;
				width: 100%;
				height: 50px;
				display: flex;
				color: white;

				.imgs {
					margin-top: 3px;
					width: 25px;
					height: 25px;
				}

				.title-mendian {
					width: 60px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					box-sizing: border-box;
					padding: 5px 0;
				}
			}
		}

		.swiper-body{
			width: 100%;
			position: absolute;
			top: 0px;
			background-color: red;
			padding-bottom: 50px;
			.swiper-body-one{
				margin-top: 120px;
				background-size: 100% 100%;
				.data-v-c6fb48d0 {
					width: 90%;
					margin: 0 auto;
					height: 150px;
					border-radius: 10px;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
